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>» Understand DHTML positioning 

> Position an element absolutely 

» Position an element relatively 

> Size an element manually 

> Stack screen elements 

>» Add a scroll bar 

» Create a sidebar 

> Incorporate an advanced positioning function 


One of DHTMLS greatest contributions to Web page design is a tool for 
positioning, or specifying the precise placement of elements within the 
page. Just like other DHTML components, DHTML positioning opens 
doors to many possibilities for new Web page features. Other DHTML 
features, such as scroll bars, complement positioning to help create effec- 
tive page layouts. Gees. Lydia wants to enrich the Web page design for 
the Nomad Ltd Web publication. She will use positioning and other 
DHTML layout features to create a sophisticated, attractive style. 


a Understanding 
am | DHTML Positioning 


A fundamental difference between document layouts in traditional media, such as posters and 
magazines, and document layouts in HTML is HTML’s lack of tools for precise placement of 
page elements. DHTML allows precise positioning of page elements through an extension of 
cascading style sheets called Cascading Style Sheets - Positioning (CSS-P). CSS-P allows you 
to position elements either absolutely, at fixed coordinates on a user’s screen, or relatively, 
based on the position of other screen elements. To specify positioning, you use the position 
attribute, which is a style sheet property. Although some advanced page layout is possible with 
basic HTML, CSS-P makes the task much easier to code and offers features not possible with 
HTML alone. gs. As Lydia researches CSS-P, she learns about several new features that she 
would like to include in her Web pages, including columns, overlap, and scripted effects. 


Columns 

Many Web page designers have created advanced layout features using basic HTML formatting. 
For example, HTML-only pages can use tables to display text in columns, rather than in one sin- 
gle block. However, adding these features in HTML can be difficult and limiting because the 
tags were not designed originally to provide advanced formatting. CSS-P makes this type of for- 
matting much simpler by allowing you to easily specify each element’s width and location on a 
Web page. CSS-P also places elements more predictably in different screen resolutions. Lydia 
plans to use the CSS-P float feature to add a sidebar to the Nomad Ltd tents page, similar to the 
one shown in Figure L-1. 


еб) Overlap 

A design feature not found in HTML but available in CSS-P, is the ability to overlap screen ele- 
ments, which facilitates adding labels over graphics. Also, it allows you to create complex lay- 
outs such as ones that superimpose words in different colors or that overlap parts of images. 
The Web page in Figure L-2 uses CSS-P to overlap text and graphics. Lydia wants to use the 
overlap feature to create a distinctive design effect in her Web pages for Nomad Ltd. She plans 
to place the general category name for each Web page in large, light-colored text behind the 
page headings. 


€ 


66%) Scripted features 

As with other DHTML tools, combining CSS-P with scripts allows you to create many new dis- 
play features for your Web pages. For example, by changing a graphic's dimensions slightly at 
regular intervals, you can animate with DHTML. You also can use scripting to allow users to 
drag elements to new positions on the Web page. Lydia plans to add some draggable elements 
to her tents page to help users visualize the placement of sleeping bags in various tent designs. 
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FIGURE 1-1: Web page containing sidebar 
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Resources 


Inside DHTML 


This site by Scott Isaacs, 
a member of the Internet 
Explorer design team, 
provides lots of juicy 
coverage of Dynamic 
HTML and excerpts his 
book - you guessed it, 
Inside Dynamic HTML. 


Toolbox 


Dreamweaver 

Platform: Win 95, Power 
Mac 

Cost: not yet set 


Taylor's Tutorial 


Taylor's Dynamic HTML Tutorial - Day 1 
Dynamic HTML is how Netscape's and 


Microsoft's 4.0 browsers are pushing the 
Web to new limits. In the first of five parts, 
Taylor looks at what dHTML is all about 
and what skills you need to code for it. 

9 Mar 1998 


Taylor's Dynamic HTML Tutorial - Day 2 
Taylor digs into dynamic HTML, showing 


you the basics of using CSS-P to lay out 
your pages. He even looks at the elusive z- 
index. 70 Mar 1998 


Taylor's Dynamic HTML Tutorial - Day 3 
Today Taylor's series gets tricky: By the 
end of the day, he'l have you scripting 


| Company: Macromedia | dHTML and making monkeys run around 
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using CSS-P 


FIGURE L-2: Web page displaying element overlap 
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A Positioning an 
HU. | Element Absolutely 


With CSS-P, you can specify an element's position in several different ways. The most straightforward 
way is to use absolute positioning, which lets you specify the left and top coordinates of an element 
on the Web page. You use the CSS-P left and top properties to specify an element's location relative 
to the top-left corner of its parent, or the object enclosing it. For example, a «SPAN» element nested 
within <DIV> tags would be positioned relative to the <DIV> element, its parent. In this case, the 
«SPAN» element is known as a child of the <DIV> element. Any element not enclosed by another 
element is a child of the browser window and is absolutely positioned with respect to the top-left cor- 
ner of the window. You can specify left and top values in points (pt), pixels (px), inches (in), mil- 
limeters (mm), or centimeters (cm). If you don't specify units, the browser defaults to pixels, which 
are the tiny units of light that create the display on a monitor. The number of pixels visible on a user's 
screen varies depending on its resolution. However, even when using pixels, it is a good idea to spec- 
ify units in order to make your code clearer when debugging it and when others read it. Фак As 
she develops a Web page describing tents available from Nomad Ltd, Lydia wants to reposition the 
elements located at the top of the page to decrease the amount of blank space in her original design. 
She adds absolute position information to the elements to create a more compact layout. 

1. Start your Web browser, cancel any dial-up activities, then open the file HTML L-1.htm 
Notice how the text flows around the image. In this version of the Web page, because Lydia 
was using only HTML, she made the text flow by grouping the image and the text together 
in a DIV tagset. However, text flow created in HTML can be unpredictable depending on the 
user's display font size and resolution settings. 


2. Start your text editor program, open the file HTML L-1.htm, then save it as a text doc- 
ument with the filename Tent absolute position.htm 

3. Scroll to the document's HEAD section, select the text [replace with logo absolute 
position code] in the embedded style sheet, then press [Delete] 


4. Type #logo (position: absolute; top: 30px; left: 30px} 
Determining the exact num- The name #logo associates this style with the ID “logo”. Figure L-3 shows the document con- 
ber of units for an element's taining the absolute position code. Lydia placed the logo so that it is 30 pixels from the top 
position coordinates is a of the browser window and 30 pixels from the left edge of the browser window. By posi- 
process of trial and error. tioning the Nomad Ltd logo using absolute positioning, Lydia's headers can move up to fill 


in the empty area at the top of the page. 

5. Scroll down until the opening DIV tag above the IMG tag for nomad.jpg appears in 
the document window, select the text [replace with ID], then press [Delete] 
Lydia wants her layout to work on both fourth-generation browsers. Because Netscape 
Navigator does not recognize absolute positioning referenced in an IMG tag, she has 
enclosed the IMG tag in DIV tags. By referencing the position information in the DIV 
element, Lydia positions the graphic element. 

6. Type ID="logo" 

7. Check your document for errors, make any necessary changes, then save Tent 
absolute position.htm as a text document 


8. Open Tent absolute position.htm in your Web browser 
The text flow may appear As Figure L-4 shows, the Nomad Ltd logo appears in the top-left corner of the window, 
differently on your screen, moved slightly down and to the right from its position in the file HTML L-1.htm. Because 
depending on its resolution. the graphic is placed absolutely at a fixed location in the window, the remaining screen ele- 


ments flow beginning at the top of the window. The presence of the graphic to the left of the 
headings has no effect on their alignment or flow. As Figure L-4 shows, the result is overlap 
between the logo and the heading text. Next, Lydia will adjust the position of the heading 


b HTML L-4 POSITIONING WITH DHTML 


FIGURE 1-3: Web document containing absolute position code 


kHTML> 
<HEAD> 


<TITLE>Nomad Ltd - Selecting a tent</TITLE> 
<LINK REL=stylesheet HREF="nomadltd.css" TYPE="text/css"> 


<STYLE> 
<1-- 
.tenthead (font-family: arial, sans-serif; font-size: 14pt} 
.button (font-family: impact, arial; font-size: 8pt} 
-norm {font-weight: normal} 
-noital {font-style: normal} 
{position: absolute; top: 


#1090 
І LU 
Name associates | </з5түгЕ> 
style with ID 
"logo" <SCRIPT LANGUAGE-"javascript"» 
<1-- 


Nav4 = (document.layers) ? 1:0; 
IE4 = (document.all) ? 1:0; 


Code to 
position logo 
at top-left 
corner of page 


if(!IE4) {window.onerror=null} 


totalTents = 0; 
function countHeaders() { 


FIGURE 1-4: Web page displaying absolutely positioned logo 


Logo placed Tents 


at precise 


coordinates electing one that's right for you 


Choosing a quality tent that meets your needs can be an intimidating task. To help you out with 
this important decision, we've added features to this page to make it easier to compare the 
characteristics of our tents. 


As you narrow your choices, click the Remove button for each tent that you're no longer 
considering, to remove it from the page. 


Tent footprints and descriptions 


XTC Starlite 
One of the lightest, most compact three-season tents available. Featuring 
two-pole clip design with a built-in vestibule. 


Remove Starlite | 


Positioning an 
Element Relatively 


In addition to placing elements at fixed screen coordinates, CSS-P allows you to simply offset 
elements from their default positions in the page flow. This format, called relative positioning, 
is useful when you want your document to always display an element before or after other ele- 
ments, but at a specified horizontal or vertical offset. (ge Lydia wants to indent the page 
headings, while leaving them in the general page flow. She uses relative positioning to specify the 
new placement for the headings. 


1. Open the file HTML L-2.htm in your text editor, then save it as a text document with 
the filename Tent relative position.htm 


2. In the embedded style sheet, select the text [replace with head relative position 
code], then press [Delete] 


3. Type #head (position: relative; left: 250px} 

Figure L-5 shows the document containing the relative position code. Similar to the absolute 
position of the logo, the left property that Lydia used to position the text moves it left in rela- 
tion to the parent element, which is the browser window. Absolute positioning removes an 
element from the flow of the document, which causes the elements below it to move up and 
to overlap its former position in the page flow. This caused the headings to move up in the 
last lesson. Relatively positioning leaves an element in the document flow. A relatively posi- 
tioned element moves relative to its default location in the page, but the elements that fol- 
low a relatively positioned element do not move up to take that position. This is what Lydia 
wants to do in her document because she wants the headings indented from the left to 
appear next to the graphic, but she does not want the text that follows to overlap the head- 
ings and graphic. 


4. Scroll until <DIV ALIGN="center" appears in the document window, select the text 
[replace with ID], then press [Delete] 


5. Select the adjacent text ALIGN="center" and press [Delete] 
6. Type ID="head" 


Lydia references the position information in the DIV element to position the headings. 


7. Check your document for errors, make any necessary changes, then save Tent rela- 
tive position.htm as a text document 


8. Open Tent relative position.htm in your Web browser 
As Figure L-6 shows, the main heading and the subheading are indented far enough from 
the left edge of the window to allow room for the logo. Because the indent was specified 
using relative positioning, the text after the headings does not move up into the positions 
previously held by the headings but, rather, continues to flow below them. 


FIGURE 1-5: Relative position code in Web document 


<HTML> 
<HEAD> 


<TITLE>Nomad Ltd - Selecting a tent</TITLE> 
<LINK REL=stylesheet HREF="nomadltd.css" TYPE="text/css"> 


<STYLE> 

<1-- 

.tenthead {font-family: arial, sans-serif; font-size: 14pt} 
utton {font-family: impact, arial; font-size: 8pt} 

.no font-weight: normal) 


Code to 
position 
heading 
within absolute; top: 30px; left: 30px} 
document #head [position: relative; left: 250рх 
flow //--> 
</STYLE> 


<SCRIPT LANGUAGE-"javascript"- 
<!-- 

Nav4 = (document.layers) ? 1:0; 
IE4 = (document.all) ? 1:0; 


if(!IE4) {window.onerror=null} 


totalTents = 0; 


FIGURE L-6: Web page displaying relatively positioned headings 


Tents 


бай: selecting one that’s right for you 


indented 
within 
main text 
flow 


Choosing a quality tent that meets your needs can be an intimidating task. To help you out with 
this important decision, we've added features to this page to make it easier to compare the 
characteristics of our tents. 


As you narrow your choices, click the Remove button for each tent that you're no longer 
considering, to remove it from the page. 


Tent footprints and descriptions 


XTC Starlite 
One of the lightest, most compact three-season tents available. Featuring 
two-pole clip design with a built-in vestibule. 

Remove Starlite 


a Sizing an Element 
HW. | Manually 


In addition to position on the page, DHTML style properties allow you to specify an element's 
dimensions using the height and width properties. You can specify the two dimensions sepa- 
rately by using the same units available for the positioning properties. Additionally, you can size 
the element relative to its parent by using percentages. If you choose not to specify the height or 
the width, the browser sizes the element automatically. (gs Lydia wants to reformat the 
description text for each tent model, so it displays indented and in a narrower column. Because 
she is changing style information for several screen elements, she adds properties to the page's 
embedded style sheet. 


1. Open the file HTML L-3.htm in your text editor, then save it as a text document with 
the filename Tent element size.htm 


2. Select the text [replace with tentbody class description] in the embedded style 
sheet, then press [Delete] 


3. Type .tentbody (position: relative; left: 100px; width: 300px} 


Figure L-7 shows the document code including the new width property. 


4. Scroll down until the <DIV ID="tent1" name="tent"> tag appears in the document 


window, then read through the code within this DIV element 

Notice that, in addition to the new style properties, Lydia has inserted CLASS="tentbody" 
in the DIV tag already, which applies the position information from the tenthead class 
description she created. She has added this information for each tent. 


9. Check your document for errors, make any necessary changes, then save Tent ele- 
ment size.htm as a text document 


6. Open Tent element size.htm in your Web browser, then scroll down until the tent 


descriptions appear in the document window 
As Figure L-8 shows, each description is indented from the left margin and the paragraph 
width is narrowed, which creates a column. 


Width property for. 
tentbody class 


List indented 


FIGURE L-7: Web document including width property code 


<HTML> 
<HEAD> 


<TITLE>Nomad Ltd - Selecting a tent</TITLE> 
<LINK REL=stylesheet HREF="nomadltd.css" TYPE="text/css"> 


<STYLE> 
<!-- 
-tenthead (font-family: arial, sans-serif; font-size: 14pt; position: 
relative; left: 100px} 

-button {font-family: impact, arial; font-size: 8pt} 

-norm {font-weight: normal} 

-noital {font-style: normal} 

#logo {position: absolute; top: 30px; left: 30px} 

#head {position: relative; left: 250px} 
-tentbody (position: relative; left: 100px; 
//--> 
</STYLE> 


width: 300px} 
<SCRIPT LA =Javascript"> 


Nav4 = (document.layers) ? 1:0; 
IE4 = (document.all) ? 1:0; 


if(!IE4) {window.onerror=null} 


FIGURE L-8: Web page displaying adjusted width 
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Аз you narrow your choices, click the Remove button for each tent that you're no longer 
considering, to remove it from the page. 


Tent footprints and description 


XTC Starlite 

One of the lightest, most compact 
three-season tents available. 
Featuring two-pole clip design with a 
built-in vestibule. 


hemove Starlite | 


Amano Brevifolia 

The simple, vaulted design 
characterized by two doors and two 
vestibules returns with the 2000 
Brevifolia model. New features 


Stacking Screen 


HTML Elements 


Because an absolutely positioned element can appear anywhere on a Web page, including the 
space occupied by other elements, the browser cant format pages containing these elements as 
it would standard HTML pages. Instead, each absolutely positioned element is considered to be 
on a separate layer, which is a transparent virtual page that determines overlap order. Web page 
layers are like sheets of clear plastic with writing or images on them in different areas. When the 
sheets are superimposed, as layers are in the browser window, all the contents of all sheets are 
visible; but some contents may block out others, depending on their order in the stack. Each 
layer’s z-index property determines its position in the stack. Higher numbers are located closer 
to the top of the stack, and elements on these layers will block out elements in the same posi- 
tion on lower layers of the stack. An element that is positioned using absolute positioning is 
placed on a separate layer. An element positioned using relative positioning remains on the same 
layer as the rest of the standard page elements. бак Lydia plans to label each page in Nomad 
Ltd’s Web publication based on its content category. She wants to place the category name at the 
top of the page so that it appears behind the headings. For the tent page, she wants to add the 
word camping to the heading background in large, light-colored type. 


1. Open the file HTML L-4.htm in your text editor, then save it as a text document with 
the filename Tent layers.htm 


2. In the embedded style sheet, select the text [replace with backtext layer code], then 
press [Delete] 


3. Type #backtext (position: absolute; left: 250px; font-size: 64pt; font-family: arial; 
color: #7093DB; z-index: -1} 


Figure L-9 shows the document code, including the new background text. The first element 
positioned in a Web page receives a z-index value of 0. Subsequently placed elements receive 
higher z-index values, resulting in later elements appearing on top of older elements by 
default. Because Lydia wants to make sure the word CAMPING appears behind the head- 
ings, she assigns it a z-index of -1, which is lower than all other default z-index values. 


. scroll down and select the text [replace with background text], then press [Delete] 
. Туре <DIV ID="backtext"> and press [Enter] 
. Type CAMPING and press [Enter], then type </DIV> 


. Check your document for errors, make any necessary changes, then save Tent layers.htm 
as a text document 


- C» o A 


8. Open Tent layers.htm in your Web browser 
As Figure L-10 shows, the text CAMPING appears behind the headings in a large and light- 
colored font. This stacked layout allows Lydia to add extra information to the Web page 
without disrupting the flow of the page. It also adds an interesting, unusual visual effect. 


z-index 
property for 
background 
text 


FIGURE L-9: Web document including background text code 


<HTML> 
<HEAD> 


<TITLE>Nomad Ltd - Selecting a tent</TITLE> 
<LINK REL=stylesheet HREF="nomadltd.css" TYPE="text/css"> 


<STYLE> 
«1-- 
.tenthead (font-family: arial, sans-serif; font-size: l4pt; position: 
relative; left: 100px} 

.button (font-family: impact, arial; font-size: 8pt} 

-norm {font-weight: normal} 

-noital {font-style: normal} 

#logo {position: absolute; top: 30px; left: 30px} 

#head {position: relative; left: 250px} 

.tentbody (position: relative; left: 100px; width: 300px} 

#backtext {position: absolute; left: 250px; font-size: 64pt; font-family: 
arial; color: #7093DB; |z-index: -1} 
//--> 
</STYLE> 


<SCRIPT LANGUAGE-"javascript"- 
<!-- 

Nav4 = (document.layers) ? 1:0; 
ТЕ4 = (document.all) ? 1:0; 


FIGURE L-10: Web page displaying background text 
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Choosing a quality tent that meets your needs can be an intimidating task. To help you out with headings 


this important decision, we've added features to this page to make it easier to compare the 
characteristics of our tents. 


As you narrow your choices, click the Remove button for each tent that you're no longer 
considering, to remove it from the page. 


Tent footprints and descriptions 


XTC Starlite 

One ofthe lightest, most compact 
three-season tents available. 
Featuring two-pole clip design with a 
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The amount of text dis- 
played in your scroll bar box 
will depend on the size of 
the font you are using and 
your screen resolution. 
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A Adding a Scroll Bar 


You can use CSS-P to associate a scroll bar with an element when the element is too large to fit 
HTML its defined size. This effect, which you create using the overflow property, allows you to create 
c the equivalent of an independent frame anywhere within your browser window. Of the fourth- 
generation browsers, only Internet Explorer accommodates the overflow property. deese То 
make the tent page layout more concise, Lydia formats the list of tent outlines and descriptions 
in a box with a scroll bar. This allows users to scroll from top to bottom in the page more quickly 

and still easily view the tent descriptions if they wish. 


Open the file HTML L-5.htm in your text editor, then save it as a text document with 
the filename Tent scroll.htm 


. In the embedded style sheet, select the text [replace with list scroll code], then 


press [Delete] 


. Туре #list (height: 300px; width: 600px; overflow: auto} 


Figure L-11 shows the Web page code in the embedded style sheet. Because the list of tent 
descriptions is much longer than 300 pixels, the height specification creates a display area 
smaller than the object size. The “auto” value for the “overflow” property instructs the 
browser to display scroll bars only where necessary. Because the text in this case is longer 
than 300 pixels, the browser will create a vertical scroll bar for the object. The width of this 
DIV is not constrained by a style setting, so a horizontal scroll bar is not needed. 


. scroll until the code for the heading Tent footprints and descriptions appears in the 


document window, select the text [replace with opening DIV tag], then press 
[Delete] 


Type <DIV ID="list"> 


Scroll to the end of the tent description list which is after the description for tent 7, 
select the text [replace with closing DIV tag], press [Delete], then type </DIV> 


7. Check your document for errors, make any necessary changes, then save Tent 


scroll.htm as a text document 


. Open Tent scroll.htm in your Web browser, then scroll down to view the list of tent 


outlines and descriptions 
As Figure L-12 shows, in IE 4 the tent-description list displays in a limited area with a ver- 
tical scroll bar on the right edge. 


Use the scroll bar for the list to view all of the tent descriptions 


FIGURE 1-11: Web document including scroll bar code 


<HTML> 
<HEAD> 


<TITLE>Nomad Ltd - Selecting a tent</TITLE> 
<LINK REL=stylesheet HREF="nomadltd.css" TYPE="text/css"> 


<STYLE> 
«1-- 
.tenthead (font-family: arial, sans-serif; font-size: l4pt; position: 
relative; left: 100px} 

.button (font-family: impact, arial; font-size: 8pt} 

-norm {font-weight: normal} 

-noital {font-style: normal} 

#logo {position: absolute; top: 30px; left: 30px} 

#head {position: relative; left: 250px} 

.tentbody {position: relative; left: 100px; width: 300px} 

#backtext {position: absolute; left: 250px; font-size: 64pt; font-family: 
arial; color: #7093DB; z-index: -1} 

$list (height: 300px; width: 600px; 
//--» 
</STYLE> 


overflow: auto} 


overflow property T LANGUAGE-"javascript"» 


adds scroll bar 


«1-- 
Nav4 = (document.layers) ? 1:0; 


FIGURE L-12: List formatted with scroll bar 
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If you are using Netscape 
Navigator 4 and the sidebar 
is slow to appear, simply 
scroll down the page and 
back to the top to see the 
scrollbar more quickly. 
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o Creating a Sidebar 


Using CSS-P's placement and sizing properties, you can create and position text blocks inde- 
HTML pendently of each other. You can use the float property to remove an element from the main text 
B flow and display it to the side of the flow. The left and right values allow you to specify whether 
the element is positioned on the right or left side of the main document flow. The float feature 
allows you to create many text effects, including sidebars, which are difficult to create with 
HTML alone. és. Lydia wants to add scale outlines of backpacks and sleeping bags to the 
tents page to give users a better feel for the relative sizes of the tents. To make this area stand out 
from the page's main text, she creates a sidebar. 


Open the file HTML L-6.htm in your text editor, then save it as a text document with 
the filename Tent sidebar.htm 


. In the embedded style sheet, select the text [replace with sidebar code], then press 


[Delete] 


. Туре #sidebar (width: 350px; float: right; position: absolute; left: 400px; font- 


family: arial; font-size: 11pt; background: #8FBC8F} and press [Enter] 

The "float" property removes the section from the document flow, and the "right" value 
specifies that it floats to the right of the flow. Lydia could specify the height, but the height 
property works in conjunction with the float property only in Internet Explorer. Navigator 
always adjusts the height of a sidebar to fit its contents, regardless of the height setting. By 
not assigning the height property, Lydia allows both browsers to automatically adjust the 
height to ensure uniform appearance. 


. Type .expl (width: 375px} 


To keep the paragraph to the left of the sidebar from overlapping it, Lydia associates it with 
a fixed width. Figure L-13 shows the Web page code containing the new style specifications. 


. Scroll until the DIV tag before the IMG tags appears in the document window, select 


the text [replace with ALIGN and ID codes], then press [Delete] 


. Type ALIGN="left" ID="sidebar" 


Sidebars that float to the right of the main text also automatically align text along the right 
edge. You can override this setting using the HTML ALIGN property. 


. Check your document for errors, make any necessary changes, then save Tent 


sidebar.htm as a text document 


Open Tent sidebar.htm in your Web browser 

As Figure L-14 shows, the text displays in a rectangle with a colored background to the right 
of the main text flow. Lydia specified absolute positioning settings for the graphics to posi- 
tion them just below the sidebar text. 
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FIGURE L-13: Web document containing style specifications for sidebar 


.tentbody (position: relative; left: 100px; width: 300px} 

#Ба t (position: absolute; left: 250px; font-size: 64pt; font-family: 
arial; color: DB; z-index: -1} 

$list (height: 300px; wi i; 600px; overflow: auto} 
$sidebar (width: 350px; !lfloat: rightl; position: absolute; 
family: arial; font-size: llpt; background: #8FBC8F} 
.expl (width: 375px} 

$packl (position: absolute; 
$pack2 (position: absolute; 
$pack3 (position: absolute; left: 425px} 
#pack4 (position: absolute; left: 460px} 
$bagl (position: absolute; left: 565px] 
$bag2 (position: absolute; left: 670px} 
/[/--» 

</STYLE> 


left: 400px; font- 


left: 
left: 


505рх} 
535px} 


<SCRIPT LANGUAGE="javascript"> 


<1-- 

Nav4 = (document.layers) ? 1:0; 
IE4 = (document.all) ? 1:0; 
if(!IE4) {window.onerror=null} 


totalTents = 0; 
function countHeaders() { 
for (var i = 0; i < document.all.length; i++) { 


FIGURE L-14: Web page displaying sidebar 


шшш CAMPING 


Choosing a quality tent that meets your needs 
can be an intimidating task. To help you out 
with this important decision, we've added 
features to this page to make it easier to 
compare the characteristics of our tents. 


As you narrow your choices, click the Remove 
button for each tent|that you're no longer 
considering, to rempve it from the page. 


Tent footprints and descriptions 
XTC Starite =. Ve 


Sidebar inserted 
to right of main 
text 


Main page text 
width adjusted 
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You also can format text 

elements to be draggable, 

using DIV or SPAN tags as 
containers. 4 


> 3. 


o Incorporating an 
HU. | Advanced Positioning 
Function 


By creating scripts to interact with position and layer information, you can add many advanced 
features to your Web pages. One exciting result of scripting position in Internet Explorer is 
dragging. A script enabling the drag feature can adjust the position of the selected element 
based on the coordinates of the pointer and then assign the element to its final position once 
the user releases the mouse button. This drag feature allows users to rearrange elements into 
an order that is more useful for them than the page's default organization or to interact with 
Web page models and games. (fgg Lydia wants to let Internet Explorer users drag the scale 
outlines of sleeping bags and backpacks over the tent outlines so they can explore how much 
each tent holds. 


1. 


Open the file HTML L-7.htm in your text editor, then save it as a text document with 


the filename Tent drag.htm 
Notice that Lydia has created the class description .drag in the embedded style section for a 
draggable element. 


. Scroll down until the var elDrag=null code appears in the document window 


Notice that Lydia has created a script in the header section that handles dragging of 
absolute-positioned elements. 


Scroll down until the IMG SRC code for the first draggable image appears in the doc- 
ument window, select the text [replace with drag code] in the opening DIV tag for 
the image tag, then press [Delete] 


. Туре CLASS="drag" canDrag 


This code associates the image with the "drag" class that Lydia defined in the embedded style 
sheet, which specifies a z-index of 10. The script Lydia inserted earlier in the code identifies 
draggable images through the “canDrag” attribute. 


. Repeat Steps 2 and 3 for the remaining five IMG tags 


Figure L-15 shows the draggable image codes for this page. 


. Check your document for errors, make any necessary changes, then save Tent 


drag.htm as a text document 


. Open Tent drag.htm in your Web browser 
. If you are using IE4, drag some of the backpack and sleeping bag outlines onto a tent 


footprint 
Look at Figure L-16, and notice that the images move with the mouse pointer. The user can 
display the images on top of the tent outlines. 


Image 
codes 
formatted 
for 
dragging 


Sleeping 
bag 
outline 
positioned 
on tent 
footprint 


FIGURE L-15: Web document containing draggable image codes 


features to this page to make it easier to compare the characteristics of 
our tents .<BR><BR></DIV> 
<DIV Ір="раск1" CLASS="drag", canDrag> 
«IMG SRC="pack.jpq"> 
</DIV> 
<DIV ID-"pack2"|CLASS-"drag"| canDrag> Attribute 
«IMG SRC="pack.jpg"> marks 
</DIV> 
FPEM element 
<DIV ID="pack3" CLASS-"drag" canDrag> as 
<IMG SRC-"pack2.jpg"» draggable 
</DIV> 
<DIV ID="pack4" CLASS-"drag" canDrag> Class 
<IMG SRC="pack2.jpg"> 
</DIV> property 
associates 
<DIV ID="bagl" CLASS="drag" canDrag> z-index 
<IMG SRC="bag.jpg"> value with 
</DIV> each 
element 
<DIV ID="bag2" CLASS-"drag" canDrag> 
<IMG SRC="bag.jpg"> 
</DIV> 
FIGURE L-16: Web page showing dragged images 
сап DE an 1пиппаайппе task. 10 пер you ош 
with this important decision, we've added 
features to this page to make it easier to 
compare the characteristics of our tents. 
As you narrow your choices, click the Remove ш ee pde 
button for each tent that you're no longer Md 
considering, to remove it from the page. 
Tent footprints and "IRSE PUES 
XTC Starlite 
One of the lightest, most compact 
three-season tents available. Pack 
Featuring two-pole clip design with a tl 
built-in vestibule. te Ше 
Remove Starlite | eing 
dragged 
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^ Practice 


» Concepts Review | 


Label the elements marked in figure L-17 with the CSS-P properties used to create them. 


С — wma TAMD ING ~ 


3 
o a quality tent that meets your needs | 


can be an intimidating task. To help you out 
with this important decision, we've added 
features to this page to make it easier to 
compare the characteristics of our tents. 


2— Nomad, Ltd 


As you narrow your choices, click the Remove K re e аб nee у 
button for each tent that you're no longer ns 
considering, to remove it from the page. 


Tent footprints and descriptions 


пиа у #Е 


Match each term with its description. 


6. Absolute positioning a. Properties for specifying element dimensions 
7. Relative positioning b. Places element at fixed coordinates outside page flow 
8. Float c. Properties for specifying location 
9. Height and width d. Property used to create sidebar 
10. Top and left e. Places element relative to parent element’s coordinates 
within page flow 


Practice 


Select the best answer from the list of choices. 


11. An absolutely positioned element is located 
a. On a separate layer from the rest of the Web page, offset from the parent element. 
b. On a separate layer from the rest of the Web page, offset from the top-left corner of the browser window. 
c. On the same layer as the rest of the page, offset from the parent element. 
d. On the same layer as the rest of the page, offset from the top-left corner of the browser window. 


12. DHTML allows precise positioning of page elements through an extension of Cascading Style Sheets called 
a. Absolute positioning. 
b. Cascading Style Sheets - Positioning. 
c. The “Position” style property. 
d. Tables. 


13. The browser always places absolutely positioned text 
a. At the top-left corner of the browser window. 
b. At the specified coordinates relative to the top-left corner of the browser window. 
c. Behind the main page elements in z-index. 
d. At the specified coordinates relative to its parent element. 


14. Which is not a valid measurement unit for specifying dimension and coordinate properties? 
a. Feet 
b. Inches 
c. Points 
d. Pixels 


15. As you add new layers to a Web page, the elements on the most recent layers receive 
a. The same z-index value as earlier layers. 
b. Smaller z-index values than earlier layers. 
c. Larger z-index values than earlier layers. 
d. Negative z-index values. 


16. Which property allows you to add scroll bars to specific elements? 
a. Scroll bar 
b. Float 
c. Layer 
d. Overflow 


1 


— 


. When adding a scroll bar to an element, assigning the value “auto” results in 
а. A scroll bar only when the element size requires it. 
b. Both horizontal and vertical scroll bars always appearing . 
c. No scroll bars. 
d. Addition of a vertical scroll bar only. 
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1. Position an element absolutely. 
a. 
b. 


C. 


h. 


e. 


> оо o со с ст 


> Skills Review 


Open the file HTML L-8.htm in your Web browser. 

Open the file HTML L-8.htm in your text editor, then save it as a text document with the filename Pack 
absolute position.htm. 

Scroll to the top of the document’s HEAD section, select the text [replace with logo absolute position code] in 
the embedded style sheet, then press [Delete]. 


. Туре #logo {position: absolute; top: 30px; left: 30px} 
. Scroll and select the text [replace with ID] in the opening DIV tag above the IMG tag for nomad.jpg, then 


press [Delete]. 


. Type ID="logo" 
. Check your document for errors, make any necessary changes, then save Pack absolute position.htm as a 


text document. 


. Open Pack absolute position.htm in your Web browser. 


. Position an element relatively. 

. Open the file HTML L-9.htm in your text editor and save a copy as Pack relative position.htm. 

. In the embedded style sheet, select the text [replace with head relative position code], then press [Delete]. 
. Type #head (position: relative; left: 275px} 

. Scroll and select the text [replace with ID], then press [Delete]. 

. Select the adjacent text ALIGN—" center" and press [Delete]. 


Type ID="head" 


. Check your document for errors, make any necessary changes, then save Pack relative position.htm as a text 


document. 
Open Pack relative position.htm in your Web browser. 


Size an element manually. 
a. 


Open the file HTML L-10.htm in your text editor, and save it as a text document with the filename Pack 
element size.htm. 


. Select the text [replace with packbody class description] in the embedded style sheet, then press [Delete]. 
. Туре .packbody (position: relative; left: 100px; width: 300px} 
. Check your document for errors, make any necessary changes, then save Pack element size.htm as a text 


document. 
Open Pack element size.htm in your Web browser and scroll down to the pack descriptions. 


. Stack screen elements. 
a. 


Open the file HTML L-11.htm in your text editor, then save it as a text document with the filename Pack 
layers.htm. 


. In the embedded style sheet, select the text [replace with backtext layer code], then press [Delete]. 

. Туре #backtext (position: absolute; left: 275px; font-size: 64pt; font-family: arial; color: #7093DB; z-index: -1} 
. Scroll and select the text [replace with background text], then press [Delete]. 

. Type <DIV ID="backtext"> and press [Enter]. 


Type HIKING and press [Enter], then type </DIV> 


. Check your document for errors, make any necessary changes, then save Pack layers.htm as a text document. 
. Open Pack layers.htm in your Web browser. 


Practice 


5. Add a scroll bar. 


o 


-l 


а. 


c 
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Open the file HTML L-12.htm in your text editor, and save it as a text document with the filename Pack 
scroll.htm. 


. In the embedded style sheet, select the text [replace with list scroll code], then press [Delete]. 
. Туре #list (height: 300px; width: 600px; overflow: auto} 

. Scroll and select the text [replace with opening DIV tag], then press [Delete]. 

. Type <DIV ID="list"> 


Scroll, and select the text [replace with closing DIV tag], press [Delete], then type </DIV> 


. Check your document for errors, make any necessary changes, then save Pack scroll.htm as a text document. 
. Open Pack scroll.htm in your Web browser, and scroll down to view the list of pack outlines and descriptions. 


Use the scroll bar for the list to view all of the pack descriptions. 


. Create a sidebar. 
a. 


Open the file HTML L-13.htm in your text editor, then save it as a text document with the filename Pack 
sidebar.htm. 


. In the embedded style sheet, select the text [replace with sidebar code], then press [Delete]. 


c. Type #sidebar {width: 350; float: right; position: absolute; left: 400px; font-family: arial; font-size: 11pt; 
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background: #8FBC8F} 


. Scroll and select the text [replace with ID], then press [Delete]. 
. Type ALIGN="left" ID="sidebar" 


Check your document for errors, make any necessary changes, then save Pack sidebar.htm as a text document. 


. Open Pack sidebar.htm in your Web browser. 


. Incorporate an advanced positioning function. 

. Open the file HTML L-14.htm in your text editor, then save a copy as Pack drag.htm. 

. Scroll and select the text [replace with drag code] in the first image tag, then press [Delete]. 

. Type CLASS" drag" canDrag 

. Repeat Steps b and c for the remaining five IMG tags. 

. Check your document for errors, make any necessary changes, then save Tent drag.htm as a text document. 


Open Tent drag.htm in your Web browser. 


. If you are using Internet Explorer, drag some of the water bottle and tent outlines onto a backpack outline. 
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> Independent Challenges | 


f. You are revising the Popular supplies page for the Green House plant store. You have incorporated positioning 
using style sheets to improve the appearance of the Web page and to make sure it displays similarly in different screen 
resolutions. Also, you have removed some of the features you added earlier to keep the page from overwhelming users 
with features. The owners would like to add additional information to the page about how to use it. You think this 
would fit best in a sidebar next to the headings. 

To complete this independent challenge: 


£5 


. Open the file HTML L-15.htm in your text editor, then save a copy as "Green House supplies with sidebar.htm". 

. In the embedded style sheet, select the text [replace with #sidebar definition], then press [Delete]. 

. Туре #sidebar (position: relative; width: 25%; float: right; font-family: arial; font-size: 11pt; background: 
#8FBC8F} 

. Scroll down to the opening DIV tag for the sidebar text, select the text [replace with ID], then press [Delete]. 

. Type ALIGN="left" ID="sidebar" 

. Check your document for errors and make any necessary changes, save Green house supplies with sidebar.htm 
as a text document and close it, then open it in your Web browser. If necessary, edit your code until the page 
displays appropriately. 
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Ф. You are adding CSS positioning information to the rider tips page for Sandhills Regional Public Transit. To super- 
impose part of the heading text on the logo graphic, you would like to rearrange the heading section. 
То complete this independent challenge: 


£5 


. Open the file HTML L-16.htm in your Web browser, then explore the page. 

. Open the file HTML L-16.htm in your text editor, then save a copy as "SRPT positioned rider tips.htm". 

. Create an embedded style sheet, define a style in the embedded style sheet named #logo specifying absolute 
position, top at 25px, left at 25px, and z-index of -1, then scroll down to the opening DIV tag above the IMG tag 
for bus.jpg and replace the text [replace with ID] with ID-" logo". 

. Define a style in the embedded style sheet named #headtop specifying absolute position, left at 30px, and top 
at 25px, then scroll down to the opening DIV tag for the first line of the page heading and replace the text 
[replace with ID] with ID="headtop". 

. Define a style in the embedded style sheet named #headbtm specifying absolute position, left at 60 px, and top 
at 325px, then scroll down to the opening DIV tag for the second line of the page heading and replace the text 
[replace with ID] with IDZ"headbtm". 

. Define a style in the embedded style sheet named #sidetext specifying absolute position, text floating on the 
right, left at 400px, top at 25px, and width of 350px, then scroll down to the opening DIV tag for the instruc- 
tions section and replace the text [replace with ID] with ALIGN="left" ID="sidetext". 

. Add style code to the UL tag for the bulleted list specifying relative position and top at Opx. 

. Check your document for errors and make any necessary changes, save and close it, then open it in your Web 
browser. If necessary, edit your code until the page displays appropriately. 
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Practice 


J. You are updating Web pages for the Community Public School Volunteers organization by adding CSS position- 
ing information. You want to improve the layout by placing the CPSV logo graphic behind the heading text. 
To complete this independent challenge: 


a. Explore the file HTML L-17.htm in your Web browser, then explore the file. 

b. Open HTML 1-17 in your text editor, then save a copy as “CPSV positioned home.htm". 

c. Create a style in the embedded style sheet to place the new, widened logo (which is the colored letters CPSV) 
behind the heading text at the top of the page with absolute positioning. Use the left and top properties to 
position it so that it appears centered behind the text. (Hint: The heading is positioned relatively to allow it to 
be displayed in front of the logo in Navigator. Be sure to set a z-index for the logo to place it behind the text.) 
Reference the style you created in the opening DIV tag for the logo graphic, which is named cpsvlog3.jpg. 

d. Create a style in the embedded style sheet for the DIV tagset enclosing the H3 heading and the links to narrow 
the width of the text area to 5076 of the page width, position the section relatively, 25% to the left, change the 
background color to white (#FFFFFF), and add a 1pt black solid border (the style code for this feature is border: 
lpt black solid). Reference the style you created in the opening DIV before the «H3» heading. 

e. Save your changes, preview the page in your Web browser, and make any changes necessary to improve the 
appearance of the Web page. 


SW 
[ 4. The World Wide Web Consortium (W3C) has included a new set of positioning specifications in 
its revised Cascading Style Sheet guidelines, known as CSS2. Many of the new features that the W3C 
~ has outlined are supported in Microsoft and Netscape fifth-generation browsers. To complete this inde- 
pendent challenge, log on to the Internet, open your Web browser, and use a search engine to locate and 
open the Web site for the W3C. Locate information about the CSS2 guidelines, then print details of two 
new positioning features in CSS2. Write a paragraph on each feature, including what it allows a Web programmer to 
do and suggested syntax for implementing it. Check the Microsoft and Netscape Web sites to find out if their fifth- 
generation browsers will support either of the features you selected and include this information in your paragraphs. 
Submit your printout and paragraphs to your instructor. 


^ 
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| Practice 


>» Visual Workshop 


You are improving the layout of the Web pages for Touchstone Booksellers using CSS positioning. Using the Wi 
HTML L-18.htm as a starting point, position the heading elements to create the layout in Figure L-18. (Hint: Think 
of the text blocks on the left and right sides of the graphic as two floating sidebars. You should add code only to the 
two sidebar text blocks.) Save your changes as a text document with the filename Touchstone positioned home.htm. 


Touchstone Booksellers 


Specializing a locally-owned, 
in nonfiction independent 
of all types bookstore since 
1948 


You can use our Web site to search our current stock, place an 
order, request a search for an out-of-print book, or find out about 
upcoming events at our store. 


